<!-- 分销服务 -->
<template>
	<view>
		<!-- 分销服务数据列表 -->
		<view class="list" v-for="(item,index) in 3">
			<view class="box">
				<view class="box_pic">
					<image src="/static/timg.jpg" mode="scaleToFill"></image>
				</view>
				<view class="box_infor">
					<view class="box_infor_left">
						<view class="box_text1">洗剪吹</view>
						<view class="box_text2">水洗+修剪+造型</view>
						<view class="box_text3">会员价 ¥ 88</view>
						<view class="box_text4">利润 5%</view>
					</view>
					<view class="box_infor_right">
						<view class="box_right_text1" @click="showTotas(index)">
							<text class="icon iconfont">&#xe62a;</text>
						</view>
						<view class="box_right_text2">分销链接</view>
						<view class="box_right_text3">销售：123单 </view>
					</view>
				</view>
			</view>
			<!-- 提示框 -->
			<!-- <view class="san" v-if='indexs==index'><text class="icon iconfont">&#xe6c1;</text></view> -->
			<view class="totas" v-if='indexs==index'>
				<view>
					<view><text class="icon iconfont">&#xe60a;</text></view>
					<view class="text">编辑</view>
				</view>
				<view @click="Offshelf(index)">
					<view><text class="icon iconfont">&#xe628;</text></view>
					<view class="text">下架</view>
				</view>
				<view @click="del(index)">
					<view><text class="icon iconfont">&#xe674;</text></view>
					<view class="text">删除</view>
				</view>
				<view>
					<view><text class="icon iconfont">&#xe629;</text></view>
					<view class="text">推广</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
					indexs:null,
					i:0,
			}
		},
		methods:{
			//显示操作提示框
			showTotas(index){
				this.indexs = index
				this.i+=1
				if(this.i==2){
					this.indexs = -1
					this.i = 0
					
				}
			},
			//点击删除
			del(index){
				let that = this
				that.indexs=-1		
				uni.showModal({
					title: '删除服务',
					content: '确定要删除这一个服务吗?',
					success: function(res) {
						if (res.confirm) {
							uni.showToast({
								title:'功能开发中',
								icon:'none'
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			//点击下架
			Offshelf(index){
				let that = this
				that.indexs = -1
				uni.showModal({
					title: '下架服务',
					content: '确定要下架这一个服务吗?',
					success: function(res) {
						if (res.confirm) {
						uni.showToast({
							icon:"none",
							title:"功能开发中"
						})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
		}
	}
</script>

<style scoped lang="less">
	// 分销服务数据列表
	.list{
		padding: 43rpx 25rpx;
		padding-bottom: 0;
		position: relative;
		.box{
			display: flex;
			padding-bottom: 43rpx;
			border-bottom:  1rpx solid #E2E2E2;
			.box_pic{
				width: 150rpx;
				height: 170rpx;
				margin-right: 32rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.box_infor{
				width: 100%;
				display: flex;
				justify-content: space-between;
				.box_infor_left{
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.box_text1{						
						font-size: 28rpx;
						font-family: PingFang;
						font-weight: bold;
						color: #000000;
						line-height: 36rpx;
					}
					.box_text2{						
						font-size: 24rpx;
						font-family: PingFang;
						font-weight: 500;
						color: #000000;
						line-height: 36rpx;
					}
					.box_text3{						
						font-size: 22rpx;
						font-family: PingFang;
						font-weight: 500;
						color: #8A8A8A;
					}
					.box_text4{						
						font-size: 22rpx;
						font-family: PingFang;
						font-weight: 500;
						color: #00C6C2;
					}
				}
				.box_infor_right{
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.box_right_text1{
						margin-left: 70rpx;
						width: 51rpx;
						height: 28rpx;
						background: #F1F1F1;
						border-radius: 14rpx;
						text-align: center;
						line-height: 28rpx;
					}
					.box_right_text2{
						margin-left: 15rpx;
						width: 107rpx;
						height: 45rpx;
						background: #00C6C2;
						border-radius: 4rpx;
						color: white;
						text-align: center;
						line-height: 45rpx;
						font-size: 20rpx;						
						font-family: PingFang;
						font-weight: 500;
						text{
							opacity: 0.8;				
						}
					}
					.box_right_text3{						
						font-size: 22rpx;
						font-family: PingFang;
						font-weight: 500;
						color: #8A8A8A;
					}
				}
			}
		}
		.san{
			position: absolute;
			top: 66rpx;
			right: 52rpx;
			opacity: 0.9;
			color: #00C6C2;	
			z-index: 99;
		}
		//提示操作框
		.totas{
			width: 400rpx;
			height: 105rpx;
			background-color: #00C6C2;	
			opacity: 0.9;
			border-radius: 4rpx;
			position: absolute;
			bottom: 36rpx;
			right: 52rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			font-size: 18rpx;
			.iconfont{
				color: #FFFFFF;
				opacity: 0.8;
			}
			.text{
				
				font-size: 20rpx;
				font-family: PingFang;
				font-weight: 500;
				color: #FFFFFF;
				opacity: 0.8;
			}
			
		}
	}
</style>
